<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-router</title>
    <!--1.引入相关的库文件-->
    <script src="../lib/vue_2.5.22.js"></script>
    <script type="text/javascript"></script>
</head>
<body>


<!-- 被vm实例所控制的区域-->
<div id="app">

    <div>父组件</div>

    <!-- 1.当我们希望li的样式有外部使用的地方定义, 因为可能有多个地方要使用该组件
            但样式希望不一样, 这个时候我们需要使用作用域插槽
     -->
    <fruit-list :list="fruitList">

        <!-- 2.父组件中使用<template>元素, 而且包含scope="slotProps"
                slotProps在这里只是个临时变量
        -->
        <template slot-scope="slotProps">
            <strong style="color: #fda252" v-if="slotProps.info.id == 2">{{slotProps.info.name}}</strong>
            <span v-else>{{slotProps.info.name}}</span>
        </template>

    </fruit-list>


    <hr>

    <br>
    <br>
    <li v-for="(item,index) in 5">
        index = {{index + 1}}, item = {{item}}
    </li>


</div>

<script>


    /**
     * 组用域插槽:
     * 应用场景: 父组件对子组件的内容进行加工和处理
     * 即可以复用组件的slot, 有可以是slot内容不一致
     *
     */
    Vue.component('fruit-list', {
        props: ['list'],
        data: function () {
            return {
                num: 0
            }
        },
        methods: {},
        /**
         * 3.子组件模板中, <slot>元素有一个类似props传递数据给组件的写法  msg="xxx",
         * 插槽可以提供一个默认内容, 如果父组件没有为这个插槽提供内容, 会显示默认内容
         * 如果父组件为这个插槽提供了内容, 则默认的内容会被替换掉
         *
         *
         * <li v-for="(item, index) in list" :key="item.id">
         *      <slot :info="item">{{item.name}} </slot>
         * </li>
         */
        template: `
        <div>
            <li v-for="(item, index) in list" :key="item.id">
                <slot :info="item">{{item.name}} </slot>
            </li>
        </div>
        `
    });

    var vue = new Vue({
        // 指定控制的区域
        el: "#app",
        data: {
            fruitList: [{
                id: 1,
                name: 'apple'
            }, {
                id: 2,
                name: 'orange'
            }, {
                id: 3,
                name: 'banana'
            }]
        },
        methods: {}
    });


</script>


</body>
</html>